<template>
  <a-card :title="title">
    <!-- <template #extra>
      <a-button
        @click="handleEdit"
        style="margin-right: 10px">编辑</a-button>
      <a-button
        type="primary"
        @click="handleSubmit">提交</a-button>
    </template> -->
    <a-card-grid
      style="width: 10%;height: 80px; text-align: center"
      :hoverable="false">序号</a-card-grid>
    <a-card-grid
      style="width: 10%;height: 80px;text-align: center"
      :hoverable="false">基数</a-card-grid>
    <a-card-grid
      style="width: 20%;height: 80px; text-align: center"
      :hoverable="false">固定比例</a-card-grid>
    <a-card-grid
      style="width: 20%;height: 80px; text-align: center"
      :hoverable="false">固定比例基准额</a-card-grid>
    <a-card-grid
      style="width: 20%;height: 80px; text-align: center"
      :hoverable="false">每下幅额</a-card-grid>
    <a-card-grid
      style="width: 20%;height: 80px; text-align: center"
      :hoverable="false">每下幅增加额</a-card-grid>
    <!-- <a-card-grid style="width: 20%;height: 80px;text-align: center" :hoverable="false">毛利率最低值</a-card-grid>
    <a-card-grid style="width: 16%;height: 80px; text-align: center" :hoverable="false" >预留字段</a-card-grid> -->
    <a-card-grid
      style="width: 10%;height: 80px; text-align: center"
      :hoverable="false">1</a-card-grid>
    <a-card-grid
      style="width: 10%;height: 80px;text-align: center"
      :hoverable="false">合同额</a-card-grid>
    <a-card-grid
      style="width: 20%;height: 80px; text-align: center"
      :hoverable="false">
      <div>
        <div
          v-show="edit"
          style="left: -10px; width: 110%; top: -23px;text-align: left;">
          <!-- <div>请输入固定比率(%)</div>
          <div>当前值为{{ rate }}%</div> -->
          <a-input-number
            :min="0"
            :max="100"
            :precision="2"
            v-model="currentRate"
            placeholder="请输入固定比率(%)" />
        </div>
        <span v-show="!edit">{{ rate }}%</span>
      </div>
    </a-card-grid>
    <a-card-grid
      style="width: 20%;height: 80px; text-align: center"
      :hoverable="false">
      <div>
        <div
          v-show="edit"
          style="left: -10px; width: 110%; top: -23px;text-align: left;">
          <!-- <div>请输入固定比例基准额(¥)</div>
          <div>当前值为{{ contrctAmount }}¥</div> -->
          <a-input-number
            :min="0"
            :precision="2"
            v-model="currentAmount"
            placeholder="请输入固定比例基准额(¥)" />
        </div>
        <span v-show="!edit">{{ contrctAmount }}¥</span>
      </div>
    </a-card-grid>
    <a-card-grid
      style="width: 20%;height: 80px; text-align: center"
      :hoverable="false">
      <div>
        <div
          v-show="edit"
          style="left: -10px; width: 110%; top: -23px;text-align: left;">
          <!-- <div>请输入每下幅额(¥)</div>
          <div>当前值为{{ contrctStep }}¥</div> -->
          <a-input-number
            :min="0"
            :precision="2"
            v-model="currentContrctStep"
            placeholder="请输入每下幅额(¥)" />
        </div>
        <span v-show="!edit">{{ contrctStep }}¥</span>
      </div>
    </a-card-grid>
    <a-card-grid
      style="width: 20%;height: 80px; text-align: center"
      :hoverable="false">
      <div>
        <div
          v-show="edit"
          style="left: -10px; width: 110%; top: -23px;text-align: left;">
          <!-- <div>请输入每下幅增加额(¥)</div>
          <div>当前值为{{ bonusStep }}¥</div> -->
          <a-input-number
            :min="0"
            :precision="2"
            v-model="currentBonusStep"
            placeholder="请输入每下幅增加额(¥)" />
        </div>
        <span v-show="!edit">{{ bonusStep }}¥</span>
      </div>
    </a-card-grid>
  </a-card>
</template>
<script>
export default {
  name: 'PerformBonus',
  components: {},
  props: {
    title: {
      type: String,
      default: () => ''
    },
    contrctAmount: {
      type: [Number, String],
      default: () => {}
    },
    rate: {
      type: [Number, String],
      default: () => {}
    },
    contrctStep: {
      type: [Number, String],
      default: () => {}
    },
    bonusStep: {
      type: [Number, String],
      default: () => {}
    },
        edit: {
      type: Boolean,
      default: () => false
    }
  },
  watch: {
    edit: function (edit) {
      if (edit) {
        this.currentAmount = this.contrctAmount
        this.currentRate = this.rate
        this.currentContrctStep = this.contrctStep
        this.currentBonusStep = this.bonusStep
      }
    }
  },
  data () {
    return {
      // edit: false,
      currentAmount: 0,
      currentRate: 0,
      currentContrctStep: 0,
      currentBonusStep: 0
    }
  },
  methods: {
    getValue () {
      /**
       * amount 基数
       * rate 比率
       * contrctStep 合同基准额
       * bonusStep 奖金幅度额
       */
      return {}
    }
  }
}
</script>
